<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
  <!--引入富文本编辑器的样式文件-->
  <link href="https://cdn.staticfile.org/wangeditor5/5.1.23/css/style.min.css" rel="stylesheet">

  <style>
    .center{
      width: 1200px;
      margin: 0 auto;
    }
    .scale{
      text-decoration: none;
      color: #666;
    }
    .scale:hover {
      transform: scale(1.2);
      transition-duration: .3s;
    }
    .scale:active{
      color: orange;
    }
    .el-card p.active,.el-card p:hover{
      color:#409EFF
    }
    h3{color: white}

    /*富文本编辑器相关样式*/
    #editor—wrapper {
      border: 1px solid #ccc;
    }
    #toolbar-container { border-bottom: 1px solid #ccc; }
    #editor-container { height: 260px; }

    [v-clock]{
      display: none;
    }
  </style>
</head>
<body>
<div id="app">
  <common-header></common-header>
  <el-container style="background-color: rgb(241,242,243)">

    <el-main v-clock >
      <el-row gutter="20">
        <el-col span="4">
          <el-card style="height: 800px">
            <p @click="location.href='personal.html'">个人信息</p>
            <p @click="location.href='/articleManagement.html'">稿件管理</p>
          </el-card>
        </el-col>
        <el-col span="20">
          <el-card  style="height: 800px">
            <el-tabs  v-model="navKey" @tab-click="toggleNav" type="card">
              <el-tab-pane :disabled="isEdit" label="食谱" :name="1"></el-tab-pane>
              <el-tab-pane :disabled="isEdit" label="视频" :name="2"></el-tab-pane>
              <el-tab-pane :disabled="isEdit" label="资讯" :name="3"></el-tab-pane>
            </el-tabs>
            <!-- 发帖表单内容开始 -->
            <el-form label-width="100px" class="right-cont-wrap">
              <el-form-item label="文章标题">
                <el-input
                        type="text"
                        placeholder="请输入文章标题"
                        v-model="postContentData.title"
                        style="width:190px"
                ></el-input>
              </el-form-item>
              <el-form-item label="文章分类">
                <el-select v-model="postContentData.categoryId" placeholder="请选择" >
                  <el-option
                          v-for="item in categoryList"
                          :label="item.name"
                          :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="封面">
                <el-upload
                           action="/api/file/upload"
                           name="picFile"
                           limit="1"
                           :file-list="imgList"
                           list-type="picture-card"
                           :on-preview="handlePictureCardPreview"
                           :on-exceed="handleExceed"
                           :on-success="handleSuccess"
                           :on-remove="handleRemove">
                  <i class="el-icon-plus"></i>
                </el-upload>
              </el-form-item>

              <el-form-item label="文章视频" v-show="postContentData.type==2">


                <el-upload style="width: 300px"
                        accept="video/mp4,video/x-m4v,video/*"
                        action="/api/file/upload"
                        name="picFile"
                        limit="1"
                        :file-list="vList"
                        :on-exceed="handleExceed"
                        class="upload-demo"
                        action="https://jsonplaceholder.typicode.com/posts/"
                        :on-remove="handleVideoRemove"
                        :on-success="handleVideoSuccess"
                        :on-preview="handlePictureCardPreview">
                  <el-button size="small" type="primary">点击上传</el-button>
                  <div slot="tip" class="el-upload__tip">只能上传mp4文件，且不超过100MB</div>
                </el-upload>



                <div class="video" v-if="vUrl!=''">
                  <video style="width: 200px;height:150px" controls="" autoplay="" name="media">
                    <source :src="vUrl" type="video/mp4">
                  </video>
                </div>
              </el-form-item>

              <el-form-item label="文章内容" v-show="postContentData.type!=2">
                <div id="editor—wrapper">
                  <div id="toolbar-container"><!-- 工具栏 --></div>
                  <div id="editor-container"><!-- 编辑器 --></div>
                </div>
              </el-form-item>
              <el-form-item label="">
                <div class="postBtns" style="text-align:center;">
                  <el-button type="primary" @click="post">{{postContentData.id==null?"发布":"修改"}}</el-button>
                  <el-button @click="history.go(-1)">取消</el-button>
                </div>
              </el-form-item>
            </el-form>
            <!-- 发帖表单内容结束 -->

          </el-card>
        </el-col>
      </el-row>


    </el-main>
  </el-container>
  <common-footer></common-footer>
</div>
</body>
<!--引入axios和vue框架文件-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>

<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script src="https://cdn.staticfile.org/wangeditor5/5.1.23/index.min.js"></script>


<script src="js/common.js"></script>
<script>


  let v = new Vue({
    el: '#app',
    data: function () {
      return {
        dialogImageUrl: '',
        dialogVisible: false,
        navKey: 1,
        postContentData:{//发帖数据
          brief: "",
          categoryId: null,
          content: "",
          imgUrl: "",
          title: "",
          type: 1,
          videoUrl: "",
          createBy:""
        },
        categoryList:[],//类别
        url:"",
        vUrl:"",
        isEdit:false,
        imgList:[],
        vList:[]
      }
    },
    methods: {
      handleExceed(){
        v.$message.error("只能选择一个文件，请删除删除已有文件进行更换！");
      },
      handleVideoSuccess(response,file,fileList){
        v.vUrl = response;
      },
      handleVideoRemove(file,fileList){//视频移除
        v.vUrl = "";
        //发出删除文件的请求
        axios.get("/api/file/remove?url="+file.response).then(function (response) {
          console.log("删除完成!");
        })
      },

      post(){
          if (v.url==''){
            v.$message.error("请选择封面图片");
            return;
          }
        if (v.postContentData.categoryId==null){
          v.$message.error("请选择分类");
          return;
        }
          v.postContentData.imgUrl = v.url;
          if (v.postContentData.type==2){
            v.postContentData.videoUrl = v.vUrl;
          }
          v.postContentData.createBy = JSON.parse(localStorage.localUser).id;
          console.log(v.postContentData);
          v.postContentData.brief = editor.getText().slice(0, 50);
          axios.post("/api/content/saveContent",v.postContentData).then(function () {
              v.$message.success("发布完成！");
              history.go(-1);
          }).catch(function (error) {
            console.log(error);
          });

      },
      toggleNav(data){//tab切换
         v.postContentData={//发帖数据
           brief: "",
           categoryId: null,
           content: "",
           imgUrl: "",
           title: "",
           type: data.name,
           videoUrl: "",
           createBy:""
         };
        v.getCategoryList(data.name);
      },
      getCategoryList(type){
        axios.get("/api/category/getCategoryListByType?type="+type).then(function (response) {
          v.categoryList = response.data;
        })
      },
      handleRemove(file, fileList) {
        v.url="";
        console.log(file, fileList);
        //发出删除文件的请求
        axios.get("/api/file/remove?url="+file.response).then(function (response) {
          console.log("删除完成!");
        })
      },
      handlePictureCardPreview(file) {
        console.log("==="+file);
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      handleSuccess(response,file,fileList){
        v.url = response;
      },


    },
    created:function () {

      let id = getParamFromUrlByName("id");
      let type = getParamFromUrlByName("type");


      if (id!=null){
          axios.get("/api/content/getContentForEdit?id="+id).then(function (response) {

            v.postContentData = response.data.data;
            v.url = v.postContentData.imgUrl;
            v.vUrl = v.postContentData.videoUrl;
            //更新编辑器
            editor.setHtml(v.postContentData.content);
            v.imgList = [{name:"图片",url:v.url}];
            if (v.vUrl!=null){
              v.vList = [{name:"视频",url:v.vUrl}];
            }
          })
      }
      if (type!=null){
        this.navKey = parseInt(type);
        this.isEdit = true;
        this.getCategoryList(type);
      }else{
        this.getCategoryList(1);
      }

    }
  })

  /**********富文本编辑器相关js开始***********/
  const { createEditor, createToolbar } = window.wangEditor
  const editorConfig = {
    placeholder: 'Type here...',
    onChange(editor) {
      const html = editor.getHtml()
      console.log('editor content', html)
      v.postContentData.content = html;
    }
  }
  const editor = createEditor({
    selector: '#editor-container',
    html: '<p><br></p>',
    config: editorConfig,
    mode: 'simple',
  })
  const toolbarConfig = {}
  const toolbar = createToolbar({
    editor,
    selector: '#toolbar-container',
    config: toolbarConfig,
    mode: 'simple',
  })
  /**********富文本编辑器相关js结束***********/


</script>
</html>